<template>
  <LayoutSidbar :style="{ backgroundColor: '#f7f7f7' }">
    <template #search-header>
      <LayoutHeader :show-add="false"></LayoutHeader>
    </template>
    <!-- 左侧 -->
    <template #left>
      <LayoutScroll ref="scrollRef">
        <template #header>
          <div class="add-note" style="background-color: #f7f7f7">
            <div class="manage-box">
              <span class="iconfont icon-lianxiren"></span>
              <span>新建笔记</span>
            </div>
          </div>
        </template>

        <!-- 列表项 -->
        <template #item>
          <div class="collection">
            <!-- 收藏导航 -->
            <div class="collect-nav">
              <ul>
                <li
                  v-for="(nav, index) in navs"
                  :key="index"
                  class="nav-item"
                  @click="selectTag({ type: nav.type })"
                  :class="{ selected: nav.type === selectType }"
                >
                  <span
                    class="iconfont"
                    :class="nav.icon"
                    style="margin-right: 10px"
                  ></span>
                  <span>{{ nav.name }}</span>
                </li>
              </ul>
            </div>

            <!-- 标签 -->
            <div class="tags">
              <div class="dropdown nav-item" @click="toggleDropdown">
                <span
                  class="iconfont icon-biaoqian"
                  style="margin-right: 10px"
                ></span>
                <span>标签</span>
              </div>

              <div v-if="isOpen" class="dropdown-list">
                <div
                  v-for="(tag, index) in tags"
                  :key="index"
                  class="dropdown-item nav-item"
                  @click="selectTag({ tagid: tag.tagid })"
                  :class="{ selected: selectedTagid === tag.tagid }"
                >
                  {{ tag.name }}
                </div>
              </div>

              <div class="down-arrow">
                <div class="arrow-head"></div>
                <div class="arrow-tail"></div>
              </div>
            </div>
          </div>
        </template>
      </LayoutScroll>
    </template>

    <template #left-footer>
      <!-- 底部剩余用量 -->
      <div class="usage">
        <div>已使用8.5MB，剩余2.0GB</div>
      </div>
    </template>
  </LayoutSidbar>
</template>

<script setup lang="ts">
import LayoutSidbar from '@/components/layout/LayoutSidbar.vue';
import LayoutScroll from '@/components/layout/LayoutScroll.vue';
import LayoutHeader from '@/components/layout/LayoutHeader.vue';
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();

const navs = ref([
  {
    name: '全部收藏',
    icon: 'icon-shoucang-quanbushoucang',
    type: 1,
  },
  {
    name: '链接',
    icon: 'icon-lianjie',
    type: 2,
  },
  {
    name: '图片与视频',
    icon: 'icon-tupian',
    type: 3,
  },
  {
    name: '笔记',
    icon: 'icon-biji',
    type: 4,
  },
  {
    name: '文件',
    icon: 'icon-wenjian',
    type: 5,
  },
  {
    name: '语音',
    icon: 'icon-yuyin',
    type: 6,
  },
]);

// 标签
const tags = ref([
  {
    tagid: 1,
    name: '标签1',
  },
  {
    tagid: 2,
    name: '标签2',
  },
  {
    tagid: 3,
    name: '标签3',
  },
  {
    tagid: 4,
    name: '标签4',
  },
  {
    tagid: 5,
    name: '标签5',
  },
  {
    tagid: 6,
    name: '标签6',
  },
  {
    tagid: 7,
    name: '标签7',
  },
  {
    tagid: 8,
    name: '标签8',
  },
  {
    tagid: 9,
    name: '标签9',
  },
  {
    tagid: 10,
    name: '标签10',
  },
]);

const selectedTagid = ref<number>(0); // 记录已选的标签
const selectType = ref<number>(0); // 记录已选的收藏类型
const isOpen = ref(false);
const scrollRef = ref<any>(null);

const toggleDropdown = () => {
  isOpen.value = !isOpen.value;

  // 触发滚动组件更新滚动条长度时间
  if (scrollRef.value) {
    scrollRef.value.updateScroll();
  }
};
const selectTag = (param: { tagid?: number; type?: number }) => {
  const { tagid, type } = param;
  selectedTagid.value = tagid || 0;
  selectType.value = type || 0;

  // 跳转理由
  router.push({
    path: '/collection/collectionlist',
    query: {
      tagid: selectedTagid.value,
      type: selectType.value,
    },
  });
};
</script>

<style scoped lang="scss">
.add-note {
  width: 100%;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;

  .manage-box {
    // border: 1px solid #d9d9d9;
    width: 100%;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    border-radius: 1px;

    font-size: 15px;

    &:hover {
      cursor: pointer;
      background-color: #eaeaea;
    }

    span {
      &:first-child {
        margin-right: 5px;
      }
    }
  }
}

.collection {
  width: 100%;
  height: 100%;
  background-color: #f7f7f7;

  .nav-item {
    width: 100%;
    height: 40px;
    padding: 12px;

    span {
      font-size: 16px;
    }

    &:hover {
      background-color: #eaeaea;
    }
  }

  .collect-nav {
    ul {
      display: flex;
      flex-direction: column;
      align-items: start;
      justify-content: center;
      padding-bottom: 10px;
      border-bottom: 1px solid #eaeaea;
    }
  }

  .tags {
    .dropdown {
      margin-top: 10px;
      position: relative;

      .down-arrow {
        display: inline-block;
        width: 0;
        height: 0;
        position: relative;
        .arrow-head {
          width: 0;
          height: 0;
          border-left: 10px solid transparent;
          border-right: 10px solid transparent;
          border-top: 20px solid #333; /* 箭头的颜色 */
          position: absolute;
          top: 0;
          left: -10px; /* 保证居中对齐 */
        }

        .arrow-tail {
          width: 20px; /* 柄的宽度 */
          height: 10px; /* 柄的高度 */
          background-color: #333; /* 箭头柄的颜色 */
          position: absolute;
          top: 20px; /* 保证箭头柄位于箭头尖端下面 */
          left: 0;
        }
      }
    }

    .dropdown-list {
      width: 100%;
      height: 100%;
    }

    .dropdown-item {
      padding-left: 38px;
      font-size: 14px;
    }
  }
}

.selected {
  background-color: #e0e0e0; /* 选中时高亮 */
}

.usage {
  height: 40px;
  padding: 15px 25px;
  font-size: 13px;
  color: #999999;
  white-space: nowrap;
  background-color: #f7f7f7;
}
</style>
